<!-- src/components/common/LoginRegisterDialog.vue -->
<template>
  <div v-if="isDialogVisible" class="dialog-overlay" @click="closeDialog">
    <div class="dialog" @click.stop>
      <div class="dialog-header">
        <h3>{{ isRegister ? '注册' : '登录' }}</h3>
        <button class="close-button" @click="closeDialog">关闭</button>
      </div>
      <div class="dialog-body">
        <form @submit.prevent="handleSubmit">
          <div v-if="!isRegister">
            <label for="login-username">用户名</label>
            <input type="text" id="login-username" v-model="loginForm.username" required />
            <label for="login-password">密码</label>
            <input type="password" id="login-password" v-model="loginForm.password" required />
            <button type="submit">登录</button>
          </div>
          <div v-else>
            <label for="register-username">用户名</label>
            <input type="text" id="register-username" v-model="registerForm.username" required />
            <label for="register-email">邮箱</label>
            <input type="email" id="register-email" v-model="registerForm.email" required />
            <label for="register-password">密码</label>
            <input type="password" id="register-password" v-model="registerForm.password" required />
            <button type="submit">注册</button>
          </div>
        </form>
        <div class="toggle-mode" @click="toggleMode">
          {{ isRegister ? '已有账号？去登录' : '没有账号？去注册' }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useUserStore } from '@/stores/useUserStore';

const userStore = useUserStore();
const isDialogVisible = ref(true); // 控制弹窗显示
const isRegister = ref(false); // 控制是登录还是注册模式

const loginForm = ref({
  username: '',
  password: '',
});

const registerForm = ref({
  username: '',
  email: '',
  password: '',
});

const closeDialog = () => {
  isDialogVisible.value = false;
};

const toggleMode = () => {
  isRegister.value = !isRegister.value;
};

const handleSubmit = () => {
  if (isRegister.value) {
    // 注册逻辑
    userStore.register(registerForm.value).then(() => {
      closeDialog();
    });
  } else {
    // 登录逻辑
    userStore.login(loginForm.value).then(() => {
      closeDialog();
    });
  }
};
</script>

<style scoped>
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.dialog {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  padding: 20px;
  width: 300px;
  text-align: center;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.dialog-header h3 {
  font-size: 18px;
}

.close-button {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
}

.dialog-body {
  display: flex;
  flex-direction: column;
}

.dialog-body label {
  margin-bottom: 5px;
}

.dialog-body input {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.dialog-body button {
  width: 100%;
  padding: 10px;
  background-color: #ff2266;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.dialog-body button:hover {
  background-color: #e01e5a;
}

.toggle-mode {
  margin-top: 10px;
  font-size: 14px;
  cursor: pointer;
  color: #ff2266;
}

.toggle-mode:hover {
  text-decoration: underline;
}
</style>